<template>
	<view class="content">
		<image class="bg-img" src="../../static/game/img-renwu-bg@2x.png" mode="scaleToFill"></image>
		<view class="top-view">
			<image class="top-box-bg" src="../../static/receive/img-renwu-150-peitu@2x.png" mode="scaleToFill"></image>
			<view class="box topBox">
				<view class="box-content">
					<text>小朋友，请把积木墙补充完整，解锁关卡，即可获得钥匙碎片一枚。</text>
				</view>
			</view>
			<image class="show-icon" :src="guideRole[nowGuideId-1]" mode="aspectFit"></image>
			<view class="box-border">
				<view class="top-box-view">
					<image src="../../static/game/icon-48-yaoshi@2x.png" mode="aspectFit"></image>
					<text>16</text>
				</view>
			</view>
		</view>
		<view class="movableArea">
			<view class="box midden-view" >
				<view class="image-view">
					<image class="img-bg" :src="bgSrc" mode="scaleToFill"></image>
					<image class="line-bg" :src="linSrc" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="box bottom-view">
				<image class="lianjie" src="../../static/share/img-60-lianjie@2x.png" mode="aspectFit"></image>
				<view class="num-view">
					{{`${usedList.length}/${itemList.length}`}}
				</view>
			</view>
			<movable-area class="movable-area-bg" id="img-bg">
<!-- :style="{left:`${item.x}px` ,top:`${item.y}px`}" -->
				<movable-view :class="{moveView:true, isDisable:item.isDisabled}" v-for="(item,index) in itemList" :key="index" direction="all" scale="true" :x="item.x" :y="item.y" :scale-value="item.scale" :data-item = "item" :data-index = "index" :disabled="item.isDisabled"  @touchstart="touchstart" @touchmove="touchmove"  @touchend="touchend" :animation="item.isAnimation">
					<view :class="{'movable-view-item':true, 'isLongpress': item.isLongpress || item.isDisabled}" >
						<image :class="{'img-small': item.isLongpress || item.isDisabled }" :src="item.src" mode="aspectFit"></image>
					</view>
				</movable-view>
			</movable-area>
		</view>
		<!--打开宝箱 -->
		<view class="dailog_view" v-if="isShowOpenBoxView">
			<view class="dailog_screen open-treasure-box">
				<image class="opne-bg-1" src="../../static/game/img-renwu-excellent-caidai@2x.png" mode="scaleToFill"></image>
				<image class="heart-bounces opne-bg-2" src="../../static/game/img-502-guang@2x.png" mode="aspectFit"></image>
				<image class="opne-bg-3" src="../../static/game/img-renwu-baoxiang-kaiqi@2x.png" mode="aspectFit"></image>
			</view>
			<view class="background_screen" ></view>
		</view>
		<!--Excellent -->
		<view class="dailog_view" v-if="isShowExcellent">
			<view class="dailog_screen open-treasure-box">
				<image class="opne-bg-1" src="../../static/game/img-renwu-excellent-caidai@2x.png" mode="scaleToFill"></image>
				<image class="heart-bounces opne-bg-2" src="../../static/game/img-502-guang@2x.png" mode="aspectFit"></image>
				<image class="opne-bg-4" src="https://image.mingpeisports.com/img-renwu-174-great%402x.png" mode="aspectFit"></image>
				<button class="cu-btn btn-get-key" v-on:click="onGetKeyClick">
						<image src="../../static/game/btn-anniu-130-renwu-yaoshi@2x.png" mode="scaleToFill"></image>
						<view>
							<image src="../../static/game/icon-48-yaoshi@2x.png" mode="aspectFit"></image>
							<text>领取钥匙碎片</text>
						</view>
				</button>
			</view>
			<view class="background_screen" ></view>
		</view>

		<!--good || great-->
		<view class="dailog_view" v-if="isShowGood">
			<view class="dailog_screen open-treasure-box">
				<image class="opne-bg-1" src="../../static/game/img-renwu-excellent-caidai@2x.png" mode="scaleToFill"></image>
				<image class="heart-bounces opne-bg-2" src="../../static/game/img-502-guang@2x.png" mode="aspectFit"></image>
				<image v-if="isGood" class="opne-bg-5" src="https://image.mingpeisports.com/img-renwu-146-good%402x.png" mode="aspectFit"></image>
				<image v-if="!isGood" class="opne-bg-5" src="https://image.mingpeisports.com/img-renwu-146-great%402x.png" mode="aspectFit"></image>
			</view>
			<view class="background_screen" ></view>
		</view>

		<!-- 打开宝箱 -->
		<view class="dailog_view" v-if="isShowOpened">
			<view class="dailog_screen opened">
				<image class="opened-bg" src="../../static/game/img-renwu-tankuang-980-bg@2x.png" mode="scaleToFill"></image>
				<image class="opened-status-img" :src="openList[openStatus - 1].img" mode="aspectFit"></image>
				<view class="opened-status-status" ><text>{{openList[openStatus - 1].detail}}</text></view>
				<button class="cu-btn btn-next" v-on:click="isShowOpened=false">
					<image src="../../static/index/btn-anniu-130-zhengchang@2x.png" mode="aspectFit"></image>
					<text>{{openList[openStatus - 1].btnText}}</text>
				</button>
			</view>
			<view class="background_screen" ></view>
		</view>
	<!-- </movable-area> -->
	</view>
</template>

<script>
let app = getApp();
import {} from "../../utils/util.js"
import {getAuthorization} from "../../tool/pubTool.js"

export default {
	data() {
		return {
			bgReact:{"id":"img-bg","dataset":{},"left":20,"right":355,"top":137,"bottom":617,"width":335,"height":480},
			bgSrc:"../../static/game/img-renwu-jimuqiang.jpg",
			linSrc:"../../static/game/img-renwu-hxsby.png",
			row:5,
			isMoveing:false,
			itemList:[{
				id:1,
				src:"../../static/game/img-renwu-hxsby-1-3-cai.png",
				isDisabled:false,
				row : 1,
				column:3,
				scale:1,
				isLongpress:false,
				isAnimation:false,
			},
			{
				id:2,
				src:"../../static/game/img-renwu-hxsby-2-2-cai.png",
				isDisabled:false,
				row : 2,
				column:2,
				scale:1,
				isLongpress:false,
				isAnimation:false,
			},
			{
				id:3,
				src:"../../static/game/img-renwu-hxsby-2-3-cai.png",
				isDisabled:false,
				row : 2,
				column:3,
				scale:1,
				isLongpress:false,
				isAnimation:false,
			},
			{
				id:4,
				src:"../../static/game/img-renwu-hxsby-2-4-cai.png",
				row : 2,
				column:4,
				scale:1,
				isLongpress:false,
				isAnimation:false,
				isDisabled:false,
			},
			{
				id:5,
				src:"../../static/game/img-renwu-hxsby-3-2-cai.png",
				row : 3,
				column:2,
				scale:1,
				isLongpress:false,
				isAnimation:false,
				isDisabled:false,
			},
			{
				id:6,
				src:"../../static/game/img-renwu-hxsby-3-4-cai.png",
				row : 3,
				column:4,
				scale:1,
				isLongpress:false,
				isAnimation:false,
				isDisabled:false,
			},
			{
				id:7,
				src:"../../static/game/img-renwu-hxsby-4-1-cai.png",
				row : 4,
				column:1,
				scale:1,
				isLongpress:false,
				isAnimation:false,
				isDisabled:false,
			},
			{
				id:8,
				src:"../../static/game/img-renwu-hxsby-4-4-cai.png",
				row : 4,
				column:4,
				scale:1,
				isLongpress:false,
				isAnimation:false,
				isDisabled:false,
			},
			],
			usedList:[],
			isShowOpenBoxView:false, //打开宝箱弹窗
			isShowExcellent:false, //Excellent弹窗
			isShowGood:false, //good弹窗
			isGood:false ,  //显示good 还是 great

			//领奖
			isShowOpened:false,
			openStatus:4,
			openList:[
				{
					img:"https://image.mingpeisports.com/img-renwu-300-menpiao-weizhongjiang%402x.png",
					status:1,
					detail:"很遗憾，本次宝箱内未抽中奖品，你还有机会从下一个宝箱内获得，快点完成任务开启下一个宝箱吧",
					btnText:"继续闯关",
				},
				{
					img:"https://image.mingpeisports.com/img-renwu-300-menpiao-bukeyong%402x.png",
					status:2,
					detail:"恭喜你获得“锦江乐园”门票一张，可前往相关兑换服务网点凭借手机号码进行兑换，门票有限期1年。",
					btnText:"查看服务点",
				},
				{
					img:"https://image.mingpeisports.com/img-renwu-300-menpiao-keyong%402x.png",
					status:3,
					detail:"恭喜你获得“锦江乐园”门票一张，可前往相关兑换服务网点凭借手机号码进行兑换，门票有限期1年。",
					btnText:"查看服务点",
				},
				{
					img:"https://image.mingpeisports.com/img_leyu_shizi_peitu@2x.png",
					status:4,
					detail:"恭喜你，获得闵行区文创产品一套，快去填写收货信息吧。",
					btnText:"领取奖品",
				}
			],

			nowGuideId:uni.getStorageSync("nowGuideId"), //选中导游ID
			guideRole:["../../static/share/img-xiangqing-196-bubu@2x.png",
			"../../static/share/img-xiangqing-196-lulu@2x.png",
			"../../static/share/img-xiangqing-196-keke@2x.png"],

		};
	},

	async onLoad(option) {
		await this.$onLaunched;
		const getHeightClick =async() => {
			return new Promise((r,e)=>{
				const query = uni.createSelectorQuery()
				query.select('#img-bg').boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  r(data)
				}).exec();
			})
		};
		let react = await getHeightClick()
		this.bgReact = react;
		this.bgWidth = react.width;
		this.bgHeight = react.height;
		const itemWidth = this.bgWidth / this.row;
		this.itemList = this.itemList.map( (d,i) =>{
			d.y = react.height - itemWidth;
			const num = i % 3;
			if(num === 0){ // 第一个
				d.x = 0;
			}else if(num === 1){ // 第二个
				d.x =  (this.bgWidth - itemWidth) / 2
			}else{
				d.x =  this.bgWidth - itemWidth
			}
			d["endX"] = ( d.column - 1) * itemWidth;  // x中心点 =  格子 +  1/2格子
			d["endY"] = ( d.row - 1) * itemWidth;
			d["oldX"] = d.x;
			d["oldY"] = d.y;

			return d;
		})
	},
	onShow() {


	},
	methods: {

		touchstart(e){
			const item = e.mp.currentTarget.dataset.item;
			const index = e.mp.currentTarget.dataset.index; // 移动的第几块
			if(item.isDisabled){
				return;
			}
			this.isMoveing = true;
			const touchs = e.mp.touches[0];
			const pageX = touchs.pageX;
			const pageY = touchs.pageY;
			let x = pageX - this.bgReact.left;
			let y = pageY - this.bgReact.top;
			item["clickX"] = (x-item.oldX );
			item["clickY"] = (y- item.oldY);
			item.oldX = item.x;
			item.oldY = item.y;
			item.isLongpress = true;
			item.isAnimation = false;
			this.$set(this.itemList,index,item)

		},
		touchmove(e){
			const item = e.mp.currentTarget.dataset.item;
			const index = e.mp.currentTarget.dataset.index; // 移动的第几块
			if(item.isDisabled){
				return;
			}
			const touchs = e.mp.touches[0];
			const pageX = touchs.pageX;
			const pageY = touchs.pageY;
			const endX = item.endX;
			const endY = item.endY;
			const itemWidth = this.bgWidth / this.row;
			const itemCent = itemWidth /2; // 宽度一半 中心点
			const offset = 3; // 允许偏差值
			let x = pageX - this.bgReact.left - item.clickX;
			let y = pageY- this.bgReact.top - item.clickY;

			const offsetX = Math.abs(endX - x);
			const offsetY = Math.abs(endY - y);

			if((offsetX <= offset) && (offsetY <= offset) ){ //达到预期位置
				item.isDisabled = true;
			}else{
				item.x = x;
				item.y = y;
			}
			item.isLongpress = true;
			item.isAnimation = false;

			this.$set(this.itemList,index,item)
		},
		touchend(e){
			if(!this.isMoveing){
				return
			}
			const item = e.mp.currentTarget.dataset.item;
			const index = e.mp.currentTarget.dataset.index; // 移动的第几块
			// console.log("结束")
			const itemWidth = this.bgWidth / this.row;
			const itemCent = itemWidth /2; // 宽度一半 中心点
			item.isLongpress = false;
			if(!item.isDisabled){
				item.isAnimation = true;
				item.x = item.oldX;
				item.y = item.oldY;
			}else{
				item.scale = 1.3;
				setTimeout(()=>{
					item.scale = 1;
					item.x = item.endX;
					item.y = item.endY;
					this.usedList.push(item)
					this.$set(this.itemList,index,item)
					this.checkLength();
				},200)
			}
			this.$set(this.itemList,index,item)
			this.isMoveing = false;
		},
		// 展示 鼓励弹窗
		checkLength(){
			setTimeout(()=>{
				if(this.usedList.length === 1){
					this.isGood = true;
					this.isShowGood =true;
					setTimeout(()=>{
						this.isGood = false;
						this.isShowGood =false;
					},2000)
				}else if(this.usedList.length ===Math.ceil(this.itemList.length / 2)){
					this.isShowGood =true;
					this.isGood = false;
					setTimeout(()=>{
						this.isGood = false;
						this.isShowGood =false;
					},2000)
				}
			},300)

		},
		onGetKeyClick(){

		},

	}
};
</script>

<style lang="stylus">
	page{
		background-color #F6F6F6
		height 100%
		width 100%
	}

	.content{
		position relative
		min-height 100%
		width 100%
		display flex
		flex-direction column
		align-items center
		.bg-img{
			width 100%;
			height 100%;
			position absolute;
			left 0;
			top:0;
			z-index 0;
		}
		.box{
			background: #F9E5A1;
			box-shadow: 0 8rpx 14rpx 5rpx rgba(165,79,49,0.68), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
			border-radius: 20rpx;
		}
		.top-view{
			position relative
			margin-top 40rpx
			width 100%;
			.top-box-bg{
				position absolute
				left 0
				top 0
				width 100%;
				height 150rpx
			}
			.topBox{
				margin 20rpx 20rpx 0 20rpx
				min-height 170rpx
				width 710rpx
				display flex
				align-items center
				// padding 32rpx
				.box-content{
					background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
					border: 2rpx solid #E8A974;
					border-radius: 12rpx;
					width 570rpx
					padding 26rpx
					padding-top 50rpx
					margin 20rpx
					>text{
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #844425;
						letter-spacing: 0;
						line-height: 36rpx;
					}
				}
			}
			.show-icon{
				width 150rpx;
				height 196rpx;
				position absolute;
				right 20rpx
				bottom 0rpx
			}
			.box-border{
				position absolute;
				width 203rpx
				// top -50rpx
				top -25rpx
				left 50%
				transform translateX(-50%)
				background: #F9E5A1;
				box-shadow: 0 7rpx 9rpx 0 rgba(165,79,49,0.68);
				border-radius: 42rpx;
				.top-box-view{
					margin 13rpx
					width 177rpx
					height 58rpx
					background: #C6784A;
					box-shadow: 0 1rpx 1rpx 0 #F8BC93, inset 0 6rpx 0 0 rgba(132,68,37,0.51);
					border-radius: 29rpx;
					display flex
					align-items center
					justify-content flex-start
					>image{
						width 48rpx
						height 48rpx;
						display block
						margin 0 20rpx
					}
					>text{
						font-family: FZY4K--GBK1-0;
						font-size: 30rpx;
						color: #FBE893;
						letter-spacing: 0.15rpx;
					}
				}
			}
		}
		.movableArea{
			width 710rpx
			position relative
			.midden-view{
				width 710rpx
				height 722rpx
				position relative
				padding 23rpx 20rpx 29rpx 20rpx
				.image-view{
					position relative
					width 670rpx
					height 670rpx
					.img-bg{
						position absolute;
						width 100%
						height 100%
						display block
					}
					.line-bg{
						position absolute;
						width 100%
						height 100%
						display block
					}
				}

			}
			.bottom-view{
				width 710rpx
				height 270rpx
				margin-top 10rpx
				position relative
				display flex
				flex-direction column
				align-items center;
				.lianjie{
					position absolute
					left 20rpx;
					top -35rpx
					height 60rpx;
					width 678rpx;
					z-index 100
				}
				.num-view{
					background: #C6784A;
					border-radius: 20rpx;
					margin-top 20rpx
					font-family: PingFangSC-Semibold;
					font-size: 28rpx;
					color: #FBE893;
					letter-spacing: 0.14rpx;
					// line-height 40rpx
					// padding 5rpx 10rpx
					min-width 100rpx
					min-height 40rpx
					text-align center
				}

			}

			.movable-area-bg{
				position absolute
				left 20rpx;
				top 23rpx
				width 670rpx
				height 960rpx
				.moveView{
					z-index 100
					width 134rpx
					height 134rpx
					.movable-view-item{
						position relative
						background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
						border: 2rpx solid #E8A974;
						display flex
						justify-content center
						align-items center
						border-radius: 13rpx;
						width 134rpx
						height 134rpx
						>image{
							width 80%;
							height 80%;
							display block
						}
						.img-small{
							width 100%;
							height 100%;
							display block
						}
					}
					.isLongpress{
						background-image: none
						border:none
					}
				}
				.isDisable{
					background-image: none
					border:none
					z-index 50
				}
			}


		}




		.open-treasure-box{
			display flex
			flex-direction column
			// justify-content center
			align-items center
			background-color rgba(0,0,0,0)
			width 665rpx
			height 100vh
			position relative
			.opne-bg-1{
				position absolute;
				left 0;
				top 0;
				width 100%;
				height 100%;
				display block
			}
			.opne-bg-2{
				position relative
				width 502rpx
				height 502rpx
				margin-top 20vh
				display block;
			}
			.opne-bg-3{
				width 430rpx
				height 280rpx
				display block;
				position absolute
				left 50%
				top 32vh
				transform translateX(-50%)
			}
			.opne-bg-4{
				width 486rpx
				height 174rpx
				display block;
				position absolute
				left 50%
				top 32vh
				transform translateX(-50%)
			}
			.opne-bg-5{
				width 370rpx
				height 146rpx
				display block;
				position absolute
				left 50%
				top 32vh
				transform translateX(-50%)
			}
			.btn-get-key{
				width 420rpx
				height 130rpx
				margin-top 200rpx
				>image{
					position absolute;
					left 0;
					top 0;
					width 100%;
					height 100%;
					display block
				}
				>view{
					display flex
					justify-content center
					align-items center
					>image{
						width 48rpx;
						height 48rpx;
						display block
						margin-right 16rpx
					}
					>text{
						position relative
						font-family: PingFangSC-Semibold;
						font-size: 36rpx;
						color: #FFFFFF;
						letter-spacing: 5.54rpx;
					}
				}

			}
		}
		.opened{
			display flex
			flex-direction column
			justify-content flex-start
			align-items center
			background-color rgba(0,0,0,0)
			width 680rpx
			height 980rpx
			position relative
			.opened-bg{
				position absolute
				left 0;
				top 0;
				width 100%;
				height 100%
			}
			.opened-status-img{
				margin-top 290rpx
				width 540rpx
				height 300rpx
				display block
			}
			.opened-status-status{
				position relative
				min-height 120rpx
				display flex
				align-items center
				justify-content center
				>text{
					font-family: PingFangSC-Semibold;
					width 500rpx
					font-size: 28rpx;
					color: #844425;
					letter-spacing: 0.14rpx;
					line-height 36rpx
					text-align left
				}
			}
			.btn-next{
				width 350rpx
				height 130rpx
				position relative
				margin-top 30rpx
				>image{
					position absolute
					left 0
					top 0
					width 100%
					height 100%
					display block
				}
				>text{
					position relative
					font-family: PingFangSC-Semibold;
					font-size: 36rpx;
					color: #FFFFFF;
					letter-spacing: 5.54rpx;
				}
			}
		}
	}

</style>
